@{ ViewData["Title"] = "表信息管理";  Layout = "_Layout"; }
<div class="app-container">
    <div class="builder-container">
        <!-- 新建配置信息弹窗 -->
        <el-dialog title="新建配置信息" :visible.sync="addModel" width="550px" :close-on-click-modal="false">
            <div style="padding: 0">
                <el-alert type="warning" :closable="false">
                    1、如果只是创建目录，父级id填0,其他随便填写;<br />
                    2、如果是生成代码，父级id填写【代码生成配置】列表页面的id
                </el-alert>
            </div>
            <div class="addModel" style="padding: 10px;">
                <el-form ref="addForm" :model="layOutOptins.fields" :rules="addOptions" label-width="120px">
                    <!-- 动态生成表单字段 -->
                    <div v-for="(row, rowIndex) in addOptions" :key="rowIndex" class="form-row">
                        <div v-for="(field, fieldIndex) in row" :key="fieldIndex" class="form-item">
                            <el-form-item :label="field.title" :prop="field.field" :required="field.required">
                                <el-input v-if="field.type === 'text'" v-model="layOutOptins.fields[field.field]" :placeholder="field.placeholder"></el-input>
                                <el-input-number v-else-if="field.type === 'number'" v-model="layOutOptins.fields[field.field]" :min="field.min" :placeholder="field.placeholder"></el-input-number>
                                <el-select v-else-if="field.type === 'select'" v-model="layOutOptins.fields[field.field]" :placeholder="field.placeholder">
                                    <el-option v-for="item in field.data" :key="item.key" :label="item.value" :value="item.key"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <div style="text-align: center;">
                    <el-button type="primary" size="small" @@click="add">
                        <i class="el-icon-plus"></i> 确 定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 左侧树形菜单 -->
        <div class="builder-left">
            <div class="module-name">代码生成配置</div>
            <div class="builder-tree">
                <el-scrollbar style="height: 100%; width: 200px">
                    <el-tree :data="tree" :props="treeProps" @@node-click="onSelect"></el-tree>
                </el-scrollbar>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="builder-content">
            <div style="height: 100%">
                <el-scrollbar style="height: 100%">
                    <div class="coder-container">
                        <!-- 代码生成器配置 -->
                        <div class="coder-item" style="padding-top: 7px">
                            <div class="config-header">
                                <span class="config-title"><i class="el-icon-document"></i> 代码生成器</span>
                                <div class="action">
                                    <span @@click="save"> <i class="el-icon-check"></i>保存 </span>
                                    <span @@click="addVisible()"> <i class="el-icon-plus"></i>新建 </span>
                                    <span @@click="ceateVuePage(0)"> <i class="el-icon-document"></i>生成Vue页面 </span>
                                    <span @@click="ceateVuePage(1)"> <i class="el-icon-document"></i>生成app页面 </span>
                                    <span @@click="ceateModel"> <i class="el-icon-tickets"></i>生成Model </span>
                                    <span @@click="createService"> <i class="el-icon-document"></i>生成业务类 </span>
                                    <span @@click="delTree"> <i class="el-icon-delete"></i>删除菜单 </span>
                                </div>
                            </div>
                            <div class="config">
                                <el-form ref="form" :model="layOutOptins.fields" :rules="formRules" label-width="90px">
                                    <!-- 动态生成表单字段 -->
                                    <div v-for="(row, rowIndex) in layOutOptins.options" :key="rowIndex" class="form-row">
                                        <div v-for="(field, fieldIndex) in row" :key="fieldIndex" class="form-item" :class="'col-' + (field.colSize || 4)">
                                            <el-form-item :label="field.title" :prop="field.field" :required="field.required">
                                                <el-input v-if="field.type === 'text'" v-model="layOutOptins.fields[field.field]" :placeholder="field.placeholder"></el-input>
                                                <el-input-number v-else-if="field.type === 'number'" v-model="layOutOptins.fields[field.field]" :min="field.min" :placeholder="field.placeholder"></el-input-number>
                                                <el-select v-else-if="field.type === 'select'" v-model="layOutOptins.fields[field.field]" :placeholder="field.placeholder">
                                                    <el-option v-for="item in field.data" :key="item.key" :label="item.value" :value="item.key"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </div>
                                    </div>
                                </el-form>
                            </div>
                        </div>

                        <!-- 提示信息 -->
                        <el-alert type="warning" :closable="false">
                            1、如果需要修改表结构，请在数据库修改，再点同步表结构->生成vue页面->生成model。
                            2、修改编辑行后需要点击生成model、生成vue页面
                        </el-alert>

                        <!-- 表结构管理 -->
                        <div class="coder-item">
                            <div class="config-header">
                                <span class="config-title"><i class="el-icon-table"></i> 表结构</span>
                                <template #content>
                                    <div style="color: red; font-size: 13px">
                                        数据库表结构发生变化时请点【同步表结构】
                                    </div>
                                </template>
                                <div class="action">
                                    <span @@click="delRow" class="ivu-icon ivu-icon-md-close">删除行数据</span>
                                    <span @@click="syncTable" class="ivu-icon ivu-icon-md-sync">同步表结构</span>
                                </div>
                            </div>
                            <div class="grid-container" style="padding-bottom: 20px">
                                <avue-crud :option="tableColumnsOption" v-model="tableForm" :data="tableColumnsData" :page.sync="tableColumnsPage" :table-loading="tableColumnsLoading" @@row-update="handleColumnUpdate" @@row-save="handleColumnSave" @@row-del="handleColumnDel"></avue-crud>
                            </div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</div>
@section Scripts {
<script>
var vm = new Vue({
    el: '#app',
    mixins: [curdMixin],
    data: function () {
        // 数据类型配置
        let dataType = [
            { key: 'text', value: 'input' },
            { key: 'textarea', value: 'textarea' },
            { key: 'switch', value: 'switch' },
            { key: 'select', value: 'select' },
            { key: 'selectList', value: 'select多选' },
            { key: 'year', value: '年' },
            { key: 'date', value: 'date(年月日)' },
            { key: 'datetime', value: 'datetime(年月日时分秒)' },
            { key: 'month', value: '年月' },
            { key: 'time', value: 'time' },
            { key: 'password', value: '密码输入框' },
            { key: 'checkbox', value: 'checkbox多选' },
            { key: 'radio', value: 'radio单选' },
            { key: 'cascader', value: '级联' },
            { key: 'treeSelect', value: '树形下拉框(多选)treeSelect' },
            { key: 'editor', value: '富文本编辑器' },
            { key: 'mail', value: 'mail' },
            { key: 'number', value: 'number' },
            { key: 'decimal', value: 'decimal' },
            { key: 'phone', value: 'phone' },
            { key: 'color', value: '颜色选择器' },
            { key: 'img', value: 'img' },
            { key: 'excel', value: 'excel' },
            { key: 'file', value: 'file' },
            { key: 'rate', value: '评分' }
        ];

        // 查询类型配置
        let searchDataType = [
            { key: '=', value: '等于' },
            { key: '!=', value: '不等于' },
            { key: 'like', value: '%模糊查询%' },
            { key: 'likeStart', value: '模糊查询%' },
            { key: 'likeEnd', value: '%模糊查询' },
            { key: 'textarea', value: 'textarea' },
            { key: 'switch', value: 'switch' },
            { key: 'select', value: 'select' },
            { key: 'selectList', value: 'select多选' },
            { key: 'year', value: '年' },
            { key: 'date', value: 'date(年月日)' },
            { key: 'datetime', value: 'datetime(年月日时分秒)' },
            { key: 'month', value: 'year_month' },
            { key: 'time', value: 'time' },
            { key: 'cascader', value: '级联' },
            { key: 'treeSelect', value: '树形级联tree-select' },
            { key: 'checkbox', value: 'checkbox' },
            { key: 'radio', value: 'radio' },
            { key: 'range', value: '区间查询' },
            { key: 'mail', value: 'mail' },
            { key: 'number', value: 'number' },
            { key: 'decimal', value: 'decimal' }
        ];

        // 列类型配置
        let columnType = [
            { key: 1, value: 'img' },
            { key: 2, value: 'excel' },
            { key: 3, value: 'file' },
            { key: 6, value: 'year(年)' },
            { key: 4, value: 'date(年月日)' },
            { key: 5, value: 'month(年月)' }
        ];

        return {
            addModel: false,
            tableHeight: 500,
            // 新建配置表单选项
            addOptions: [
                [
                    {
                        title: '父 级 ID',
                        min: 0,
                        field: 'ParentId',
                        required: true,
                        type: 'number',
                        placeholder: '放在【代码生成配置】列表的文件夹ID下,如果填入【0】就是一级目录'
                    }
                ],
                [
                    {
                        title: '项目类库',
                        field: 'Namespace',
                        placeholder: '代码生成后的所在类库(可以自己提前在后台项目中创建一个.netcore类库)',
                        type: 'select',
                        required: true,
                        data: []
                    }
                ],
                [
                    {
                        title: '表中文名',
                        field: 'ColumnCNName',
                        required: true,
                        placeholder: '表对应的中文名字,界面上显示会用到'
                    }
                ],
                [
                    {
                        title: '实际表名',
                        field: 'TableName',
                        required: true,
                        placeholder: '数据库实际表名或者视图名(多表关联请创建视图再生成代码)'
                    }
                ],
                [
                    {
                        title: '文件夹名',
                        placeholder: '生成文件所在类库中的文件夹名(文件夹可以不存在);注意只需要填写文件夹名，不是路径',
                        field: 'FolderName',
                        required: true
                    }
                ]
            ],
            // 布局配置
            layOutOptins: {
                fields: {
                    Table_Id: '',
                    ParentId: null,
                    Namespace: '',
                    ColumnCNName: '',
                    TableName: '',
                    TableTrueName: '',
                    FolderName: '',
                    DetailCnName: '',
                    DetailName: '',
                    ExpressField: '',
                    SortName: '',
                    RichText: '',
                    UploadField: '',
                    UploadMaxCount: '',
                    Enable: 0,
                    VuePath: '',
                    AppPath: ''
                },
                options: [
                    [
                        {
                            title: '主 键 ID',
                            field: 'Table_Id',
                            readonly: true,
                            disabled: true
                        },
                        {
                            title: '父 级 ID',
                            field: 'ParentId',
                            min: 0,
                            required: true,
                            type: 'number'
                        },
                        {
                            title: '项目类库',
                            placeholder: '代码生成存放的位置',
                            field: 'Namespace',
                            type: 'select',
                            required: true,
                            data: [],
                            colSize: 6
                        }
                    ],
                    [
                        {
                            title: '表中文名',
                            field: 'ColumnCNName',
                            required: true
                        },
                        {
                            title: '表 别 名',
                            placeholder: '默认与实际表名相同',
                            field: 'TableName',
                            required: true
                        },
                        { title: '实际表名', field: 'TableTrueName' },
                        {
                            title: '文件夹名',
                            placeholder: '生成文件所在类库中的文件夹名(文件夹可以不存在)',
                            field: 'FolderName',
                            required: true
                        }
                    ],
                    [
                        {
                            title: '明细中文名',
                            field: 'DetailCnName',
                            placeholder: '明细表中文名字'
                        },
                        { title: '明细表名', field: 'DetailName', placeholder: '数据库表名' },
                        {
                            title: '快捷编辑',
                            field: 'ExpressField',
                            placeholder: '快捷编辑字段'
                        },
                        {
                            title: '排序字段',
                            field: 'SortName',
                            placeholder: '多个排序字段逗号隔开(默认降序排序),如：Name,Age'
                        }
                    ],
                    [
                        {
                            title: 'Vue路径',
                            field: 'VuePath',
                            type: 'text',
                            placeholder: '路径：E:/app/src/views',
                            colSize: 6
                        },
                        {
                            title: 'app路径',
                            field: 'AppPath',
                            type: 'text',
                            placeholder: '路径：E:/uniapp/pages',
                            colSize: 6
                        }
                    ]
                ],
                columns: [
                    {
                        label: '列显示名称',
                        prop: 'ColumnCnName',
                        fixed: true,
                        width: 120,
                        rules: [
                            { required: true, message: '列显示名称不能为空', trigger: 'blur' }
                        ]
                    },
                    {
                        label: '列名',
                        prop: 'ColumnName',
                        fixed: true,
                        width: 120,
                        rules: [
                            { required: true, message: '列名不能为空', trigger: 'blur' }
                        ]
                    },
                    {
                        label: '主键',
                        prop: 'IsKey',
                        width: 90,
                        type: 'switch'
                    },
                    {
                        label: '是否排序',
                        prop: 'Sortable',
                        width: 90,
                        type: 'switch'
                    },
                    {
                        label: 'app列',
                        prop: 'Enable',
                        width: 140,
                        type: 'select',
                        dicData: [
                            { label: '显示/查询/编辑', value: 1 },
                            { label: '显示/编辑', value: 2 },
                            { label: '显示/查询', value: 3 },
                            { label: '显示', value: 4 },
                            { label: '查询/编辑', value: 5 },
                            { label: '查询', value: 6 },
                            { label: '编辑', value: 7 }
                        ]
                    },
                    {
                        label: '查询行',
                        prop: 'SearchRowNo',
                        width: 90,
                        type: 'number'
                    },
                    {
                        label: '查询列',
                        prop: 'SearchColNo',
                        width: 90,
                        type: 'number'
                    },
                    {
                        label: '查询类型',
                        prop: 'SearchType',
                        width: 150,
                        type: 'select',
                        dicData: searchDataType
                    },
                    {
                        label: '编辑行',
                        prop: 'EditRowNo',
                        width: 90,
                        type: 'number'
                    },
                    {
                        label: '编辑列',
                        prop: 'EditColNo',
                        width: 90,
                        type: 'number'
                    },
                    {
                        label: '编辑类型',
                        prop: 'EditType',
                        width: 150,
                        type: 'select',
                        dicData: dataType
                    },
                    {
                        label: '数据源',
                        prop: 'DropNo',
                        width: 120,
                        type: 'select',
                        dicData: []
                    },
                    {
                        label: 'table列显示类型',
                        prop: 'IsImage',
                        width: 130,
                        type: 'select',
                        dicData: columnType
                    },
                    {
                        label: '列显示顺序',
                        prop: 'OrderNo',
                        width: 120,
                        type: 'number'
                    },
                    {
                        label: '字段最大长度',
                        prop: 'Maxlength',
                        width: 130,
                        type: 'number'
                    },
                    {
                        label: '数据类型',
                        prop: 'ColumnType',
                        width: 120
                    },
                    {
                        label: '可为空',
                        prop: 'IsNull',
                        width: 120,
                        type: 'switch'
                    },
                    {
                        label: '是否只读',
                        prop: 'IsReadDataset',
                        width: 120,
                        type: 'switch'
                    },
                    {
                        label: '是否显示',
                        prop: 'IsDisplay',
                        width: 120,
                        type: 'switch'
                    },
                    {
                        label: 'table列宽度',
                        prop: 'ColumnWidth',
                        width: 120,
                        type: 'number'
                    },
                    {
                        label: '编辑字段宽度colSize',
                        prop: 'ColSize',
                        width: 180,
                        type: 'select',
                        dicData: [
                            { label: '自动宽度', value: 0 },
                            { label: '20%', value: 2 },
                            { label: '30%', value: 3 },
                            { label: '40%', value: 4 },
                            { label: '50%', value: 6 },
                            { label: '60%', value: 8 },
                            { label: '80%', value: 10 },
                            { label: '100%', value: 12 }
                        ]
                    }
                ]
            },
            // 表单验证规则
            formRules: {},
            // 树形数据
            tree: [],
            treeProps: {
                children: 'children',
                label: 'name'
            },
            // 表信息
            tableInfo: null,
            // 表列数据
            tableColumnsData: [],
            tableColumnsPage: {
                pageNo: 1,
                pageSize: 20
            },
            tableColumnsLoading: false,
            tableForm: {},
            // 表列配置
            tableColumnsOption: {
                tip: '表列信息',
                border: true,
                index: true,
                stripe: true,
                menuAlign: 'center',
                align: 'center',
                addBtn: true,
                editBtn: true,
                delBtn: true,
                viewBtn: false,
                page: true,
                size: 'small',
                column: []
            }
        };
    },
    watch: {
        'layOutOptins.fields.VuePath'(val) {
            localStorage.setItem('vuePath', val);
        },
        'layOutOptins.fields.AppPath'(val) {
            localStorage.setItem('appPath', val);
        }
    },
    methods: {
        // 显示新建配置弹窗
        addVisible(pid) {
            this.addModel = true;
            // 重置表单
            this.$refs.addForm.resetFields();
            this.tableColumnsData = [];
            if (pid) {
                this.layOutOptins.fields.ParentId = pid;
            }
        },
        // 加载表信息
        loadTableInfo(id) {
            axios.post('/api/SysTableInfo/GetPagesAsync', { PageNo: 1, PageSize: 10, Id: id }).then((response) => {
                if (response.data.Code === 200 && response.data.Data.List.length > 0) {
                    let data = response.data.Data.List[0];
                    this.tableInfo = data;
                    
                    // 填充表单数据
                    for (let key in data) {
                        if (this.layOutOptins.fields.hasOwnProperty(key)) {
                            this.layOutOptins.fields[key] = data[key];
                        }
                    }
                    
                    // 加载表列数据
                    this.tableColumnsData = data.TableColumns || [];
                    
                    // 设置表列配置
                    this.tableColumnsOption.column = this.layOutOptins.columns;
                }
            }).catch((error) => {
                this.$message.error('加载表信息失败：' + error.message);
            });
        },
        // 选择树形节点
        onSelect(node) {
            this.loadTableInfo(node.id);
        },
        // 保存配置
        save() {
            // 收集表单数据
            if (this.tableInfo) {
                for (let key in this.layOutOptins.fields) {
                    if (this.tableInfo.hasOwnProperty(key)) {
                        this.tableInfo[key] = this.layOutOptins.fields[key];
                    }
                }
                
                // 更新表列信息
                this.tableInfo.TableColumns = this.tableColumnsData;
                
                // 保存到服务器
                axios.post('/api/SysTableInfo/UpdateAsync', this.tableInfo).then((response) => {
                    if (response.data.Code === 200) {
                        this.$message.success('保存成功');
                    } else {
                        this.$message.error('保存失败：' + response.data.Message);
                    }
                }).catch((error) => {
                    this.$message.error('保存失败：' + error.message);
                });
            } else {
                this.$message.error('请先选择或创建表信息');
            }
        },
        // 新增配置
        add() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let formData = { ...this.layOutOptins.fields };
                    
                    // 调用API新增
                    axios.post('/api/SysTableInfo/AddAsync', formData).then((response) => {
                        if (response.data.Code === 200) {
                            this.addModel = false;
                            this.$message.success('新增成功');
                            
                            // 刷新树形菜单
                            this.loadTree();
                        } else {
                            this.$message.error('新增失败：' + response.data.Message);
                        }
                    }).catch((error) => {
                        this.$message.error('新增失败：' + error.message);
                    });
                }
            });
        },
        // 加载树形菜单
        loadTree() {
            axios.post('/api/SysTableInfo/GetlistAsync').then((response) => {
                if (response.data.Code === 200) {
                    let list = response.data.Data;
                    this.tree = this.buildTree(list);
                }
            }).catch((error) => {
                this.$message.error('加载树形菜单失败：' + error.message);
            });
        },
        // 构建树形结构
        buildTree(list, parentId = 0) {
            let tree = [];
            list.forEach(item => {
                if (item.ParentId === parentId) {
                    let children = this.buildTree(list, item.Table_Id);
                    if (children.length > 0) {
                        item.children = children;
                    }
                    tree.push({
                        id: item.Table_Id,
                        name: item.ColumnCNName,
                        parentId: item.ParentId
                    });
                }
            });
            return tree;
        },
        // 删除菜单
        delTree() {
            let tableId = this.layOutOptins.fields.Table_Id;
            if (!tableId) return this.$message.error('请选择节点');
            
            this.$confirm('确认要删除吗？', '删除警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                axios.delete('/api/SysTableInfo/DeleteAsync', { data: { Id: tableId } }).then((response) => {
                    if (response.data.Code === 200) {
                        this.$message.success('删除成功，请刷新页面');
                        this.loadTree();
                    } else {
                        this.$message.error('删除失败：' + response.data.Message);
                    }
                }).catch((error) => {
                    this.$message.error('删除失败：' + error.message);
                });
            }).catch(() => {
                // 取消删除
            });
        },
        // 生成Vue页面
        ceateVuePage(isApp) {
            this.$message.info('此功能暂未实现');
        },
        // 生成Model
        ceateModel() {
            this.$message.info('此功能暂未实现');
        },
        // 生成业务类
        createService() {
            this.$message.info('此功能暂未实现');
        },
        // 删除行数据
        delRow() {
            if (this.tableColumnsData.length === 0) return;
            
            this.$confirm('确认要删除选择的数据吗？', '删除警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                // 这里应该调用删除选中行的API，暂时模拟删除
                this.$message.success('删除成功');
            }).catch(() => {
                // 取消删除
            });
        },
        // 同步表结构
        syncTable() {
            this.$message.info('此功能暂未实现');
        },
        // 处理列更新
        handleColumnUpdate(row, index) {
            // 这里应该调用更新列的API
            this.$message.success('列更新成功');
        },
        // 处理列保存
        handleColumnSave(row, done, loading) {
            // 这里应该调用保存列的API
            setTimeout(() => {
                done();
                this.$message.success('列保存成功');
            }, 1000);
        },
        // 处理列删除
        handleColumnDel(row, index) {
            // 这里应该调用删除列的API
            this.$message.success('列删除成功');
        }
    },
    mounted() {
        // 设置表格高度
        let clientHeight = document.documentElement.clientHeight - 170;
        this.tableHeight = clientHeight < 400 ? 400 : clientHeight;
        
        // 加载树形菜单
        this.loadTree();
        
        // 从本地存储获取路径
        this.layOutOptins.fields.VuePath = localStorage.getItem('vuePath') || '';
        this.layOutOptins.fields.AppPath = localStorage.getItem('appPath') || '';
        
        // 设置表列配置
        this.tableColumnsOption.column = this.layOutOptins.columns;
    }
});
</script>

<style scoped>
.builder-tree {
  position: absolute;
  top: 41px;
  bottom: 0;
}

.builder-container {
  widows: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  display: inline-block;
  bottom: 0;
}

.builder-left {
  position: relative;
  width: 201px;
  height: 100%;
  border-right: 2px solid #dcd6d6;
}

.builder-content {
  position: absolute;
  top: 0px;
  left: 200px;
  display: inline-block;
  bottom: 0;
  right: 0px;
}

.builder-content .el-alert {
  position: relative;
  display: flex;
  padding: 12px 18px 12px 38px;
}

.builder-content .el-alert__icon {
  top: 10px;
}

.builder-content .action {
  text-align: right;
  line-height: 33px;
  padding-right: 26px;
}

.builder-content .action i {
  top: 0px;
  position: relative;
}

.builder-content .action > span {
  padding: 0px 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #5a5f5e;
}

.builder-content .action > span:hover {
  cursor: pointer;
  color: black;
}

.builder-content .config {
  padding: 15px 15px 0px 15px;
  border-radius: 3px;
  background: #ffffff;
  margin-bottom: 10px;
}

.coder-container {
  background: #eee;
}

.coder-container .coder-item {
  background: white;
  padding: 0px 15px;
}

.module-name {
  color: #2d8cf0;
  font-size: 13px;
  line-height: 39px;
  padding-left: 15px;
  border: 1px solid #abdcff;
  background-color: #f0faff;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.config-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.config-title i {
  margin-right: 8px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-item {
  flex: 1;
  min-width: 200px;
  margin-right: 15px;
}

.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-6 { width: 50%; }
.col-8 { width: 66.666%; }
.col-10 { width: 83.333%; }
.col-12 { width: 100%; }

.addModel {
  padding: 10px;
}
</style>
}